
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>生产过程管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../css/layui.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">生产过程管理系统</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>

        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                <a href="javascript:;">
                    <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
                    tester
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">个人设置</a></dd>
                    <dd><a href="javascript:;">退出</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">

            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item">
                    <a class="" href="javascript:;">人员信息管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:goPage('person_list.html');">人员信息管理</a></dd>
                        <dd><a href="javascript:goPage('');">人员信息编辑</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">物料信息管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:goPage('material_list.html');">物料信息管理</a></dd>
                        <dd><a href="javascript:goPage('');">物料信息编辑</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;">设备信息管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:goPage('device_list.html');">设备信息管理</a></dd>
                        <dd><a href="javascript:;">设备信息编辑</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">产品型号管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:goPage('product_list.html');">产品信息管理</a></dd>
                        <dd><a href="javascript:goPage('');">产品信息编辑</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <blockquote class="layui-elem-quote layui-text">
                <span class="layui-breadcrumb">
                  <a href="">设备信息</a>
                  <a><cite>设备信息管理</cite></a>
                </span>
            </blockquote>

            <!-- 查询条件表单  -->
            <form class="layui-form layui-row layui-col-space16" action="<%=request.getContextPath()%>/device/list">
                <div class="layui-col-md2">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-username"></i>
                        </div>
                        <input type="text" name="name"  placeholder="设备名称" class="layui-input" lay-affix="clear" value="">
                    </div>
                </div>
                <div class="layui-col-md2">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-username"></i>
                        </div>
                        <input type="text" name="number"  placeholder="设备编号" class="layui-input" lay-affix="clear" value="">
                    </div>
                </div>
                <div class="layui-col-md2">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-username"></i>
                        </div>
                        <input type="text" name="type"  placeholder="设备类型" class="layui-input" lay-affix="clear" value="">
                    </div>
                </div>
                <div class="layui-col-md2">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-username"></i>
                        </div>
                        <input type="text" name="vendor"  placeholder="供应商" class="layui-input" lay-affix="clear" value="">
                    </div>
                </div>
                <div class="layui-col-md2">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-date"></i>
                        </div>
                        <input type="text" id="date" name="date" placeholder="出厂日期" class="layui-input demo-table-search-date" lay-verify="date">
                    </div>
                </div>
                <div class="layui-col-md2">
                    <div class="layui-input-wrap">
                        <button class="layui-btn" lay-submit lay-filter="demo-table-search">查询</button>
                        <a href="javascript:void(0)" id="btn_device_add" class="layui-btn layui-bg-blue">添加</a>
                    </div>
                </div>
            </form>
            <!--
                列表展示
            -->
            <table class="layui-table" id="device-table-search"></table>


        </div>
    </div>
</div>
<!-- 底部页脚部分 -->
<div class="footer">
    <p class="text-center">
        2024 &copy;
    </p>
</div>


</body>

<div id="editBox" style="display: none;">
    <form class="layui-form" lay-filter='device-form' action="#">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label width120">设备编号 </label>
                <div class="layui-input-inline">
                    <input type="text" name="device_number" lay-verify="required" placeholder="请输入设备编号" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label width120">设备名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="device_name" lay-verify="required" placeholder="请输入设备名称" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label width120">设备类型</label>
                <div class="layui-input-inline">
                    <input type="text" name="device_type" lay-verify="required" placeholder="请输入设备类型" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label width120">供应商名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="device_vendor" lay-verify="required" placeholder="请输入供应商名称" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label width120">出厂日期</label>
                <div class="layui-input-inline layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-date"></i>
                    </div>
                    <input type="text" name="device_date" id="device_date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label width120">质保期</label>
                <div class="layui-input-inline">
                    <input type="text" name="device_time" lay-verify="required" placeholder="请输入质保期" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label width120">售后联系人</label>
                <div class="layui-input-inline">
                    <input type="text" name="device_after_sales" lay-verify="required" placeholder="请输入售后联系人名称" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label width120">联系电话</label>
                <div class="layui-input-inline">
                    <input type="text" name="device_phone" lay-verify="required" placeholder="请输入联系电话" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label width120">质保说明</label>
                <div class="layui-input-inline">
                    <input type="text" name="device_illustrate" lay-verify="required" placeholder="请输入质保说明" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="form-submit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<script type="text/html" id="barDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="update">编辑</a>
        <a class="layui-btn layui-btn-xs layui-bg-orange" lay-event="delete">删除</a>
    </div>
</script>
<script type="text/javascript" src="../js/layui.js"></script>
<script>
    layui.use( function(){
        var laydate = layui.laydate;
        var dropdown = layui.dropdown;
        var $ = layui.$;
        var layer = layui.layer;
        var util = layui.util;
        var table = layui.table;
        var form = layui.form;

        // 渲染
        laydate.render({
            elem: '#date'
        });

        // 创建表格实例
        let mainTable = table.render({
            id: 'test1',
            elem: '#device-table-search',
            url: 'http://localhost:8888/listDevice', // 此处为静态模拟数据，实际使用时需换成真实接口
            method: 'post',
            headers: {'Access-Control-Allow-Origin': '*'},
            cols: [[
                {type: 'checkbox', title: '', fixed: true}, // 单选框
                {field:'id', title: 'ID', width:60, sort: true, fixed: true},
                {field:'name', title: '设备名称', minWidth:120, sort: true},
                {field:'number', title: '设备编号', sort: true, minWidth:120},
                {field:'type', title: '设备类型', width: 90},
                {field:'vendor', title: '供应商', width:100},
                {field:'date', title: '出厂日期', sort: true, width: 150},
                {field:'time', title: '质保期', width: 90},
                {field:'afterSales', title: '售后联系人', minWidth: 100},
                {field:'phone', title: '联系电话', width:120},
                {field:'illustrate', title: '质保说明', width:120},
                {fixed: 'right', title:'操作', minWidth: 125, toolbar: '#barDemo'}
            ]],

            page: true,
            height: 'full'
        });

        // 触发单元格工具事件
        table.on('tool(test1)', function(obj){ // 双击 toolDouble
            var rowData = obj.data; // 获得当前行数据
            if(obj.event === 'update'){
                let editBox = layer.open({
                    title: `<button type="button" class="layui-btn layui-bg-gray">
						<i class="layui-icon layui-icon-edit layui-font-12"></i> <b>设备信息编辑</b>
					  </button>
				`,
                    type: 1,
                    area: ['600px','500px'],
                    content: $('#editBox').html(),
                    success: function(){
                        // 对弹层中的表单进行初始化渲染
                        form.render();
                        // 表单提交事件
                        form.on('submit(form-submit)', function(data){
                            var field = data.field; // 获取表单字段值
                            // 显示填写结果，仅作演示用
                            // layer.alert(JSON.stringify(field), {
                            //   title: '当前填写的字段值'
                            // });
                            // // 此处可执行 Ajax 等操作
                            // var data = layui.form.val('device-form');
                            console.log(field)
                            $.ajax({
                                url: "http://localhost:8888/saveDevice",
                                type: "post",
                                headers: {'Access-Control-Allow-Origin': '*'},
                                // datatype: "json",
                                data: {
                                    id: rowData.id,
                                    number: field.device_number,
                                    name: field.device_name,
                                    type: field.device_type,
                                    vendor: field.device_vendor,
                                    date: field.device_date,
                                    time: field.device_time,
                                    afterSales: field.device_after_sales,
                                    phone: field.device_phone,
                                    illustrate: field.device_illustrate
                                },
                                success: function (e) {
                                    layer.msg('操作成功！');
                                    // console.log(e);
                                    layer.close(editBox);   // 关闭对话框
                                    mainTable.reload(); // 重新加载表格数据
                                }

                            });
                            return false; // 阻止默认 form 跳转
                        });
                    }
                });
                laydate.render({
                    elem: '#device_date'
                });
                console.log(rowData)
                //对表单元素进行赋值
                layui.form.val('device-form', {
                    "id": rowData.id,
                    "device_number": rowData.number,
                    "device_name": rowData.name,
                    "device_type": rowData.type,
                    "device_vendor": rowData.vendor,
                    "device_date": rowData.date,
                    "device_time": rowData.time,
                    "device_after_sales": rowData.afterSales,
                    "device_phone": rowData.phone,
                    "device_illustrate": rowData.illustrate
                });

            } else if(obj.event === 'delete'){
                layer.confirm('确定要删除该行数据吗？', function(index){
                    $.ajax({
                        url: "http://localhost:8888/delDevice",
                        type: "post",
                        // datatype: "json",
                        data: {
                            id: rowData.id,
                        },
                        success: function (e) {
                            layer.msg('操作成功！');
                            // console.log(e);
                            mainTable.reload(); // 重新加载表格数据
                        }
                    });
                });
            }
        });

        // 搜索提交
        form.on('submit(demo-table-search)', function(data){
            var field = data.field; // 获得表单字段
            // 执行搜索重载
            table.reload('test1', {
                page: {
                    curr: 1 // 重新从第 1 页开始
                },
                where: field // 搜索的字段
            });
            layer.msg('搜索成功<br>');
            return false; // 阻止默认 form 跳转
        });

        // 添加按钮的处理
        $('#btn_device_add').click(function(){
            let editBox = layer.open({
                title: `<button type="button" class="layui-btn layui-bg-gray">
					<i class="layui-icon layui-icon-edit layui-font-12"></i> <b>设备信息添加</b>
				  </button>
			`,
                type: 1,
                area: ['600px','500px'],
                content: $('#editBox').html(),
                success: function(){
                    // 对弹层中的表单进行初始化渲染
                    form.render();
                    // 表单提交事件
                    form.on('submit(form-submit)', function(data){
                        var field = data.field; // 获取表单字段值
                        // 显示填写结果，仅作演示用
                        // layer.alert(JSON.stringify(field), {
                        //   title: '当前填写的字段值'
                        // });
                        // 此处可执行 Ajax 等操作
                        // var data = layui.form.val('device-form');
                        console.log(data);
                        $.ajax({
                            url: 'http://localhost:8888/saveDevice',
                            method: 'GET',
                            datatype: 'json',
                            data: {
                                number: field.device_number,
                                name: field.device_name,
                                type: field.device_type,
                                vendor: field.device_vendor,
                                date: field.device_date,
                                time: field.device_time,
                                afterSales: field.device_after_sales,
                                phone: field.device_phone,
                                illustrate: field.device_illustrate
                            },
                            success: function (e) {
                                layer.msg('添加操作成功！');
                                // console.log(e);
                                layer.close(editBox);   // 关闭对话框
                                mainTable.reload(); // 重新加载表格数据
                            }
                        });
                        return false; // 阻止默认 form 跳转
                    });
                }
            });
            laydate.render({
                elem: '#device_date'
            });
            var data = {
                "id": 0,
            };
            //对表单元素进行赋值
            layui.form.val('device-form', {
                "id": data.id,
                "device_number": data.number,
                "device_name": data.name,
                "device_type": data.type,
                "device_vendor": data.vendor,
                "device_date": data.date,
                "device_time": data.time,
                "device_after_sales": data.afterSales,
                "device_phone": data.phone,
                "device_illustrate": data.illustrate
            });
        });
    });
</script>
<script>
    function remove(id) {
        if (confirm("确定是否要删除？")) {
            window.location.href = '/device/delete?id=' + id;
        }
    }
    function goPage(url) {
        window.location.href = url;
    }

</script>
</html>
